<template>
  <div class="container">
    <ul class="blog-list">
      <li v-for="article in articleList">
        <div class="item-wrapper">
          <a class="title" @click="jumpToArticle(article)">{{article.title}}</a>
          <p class="abstract">{{article.abstract}}</p>
          <div class="meta">
            <span>
              <span>发布于 </span>
              <span>{{article.createTime}}</span>
            </span>
            <span>
              <span> | 更新于 </span>
              <span>{{article.updateTime}}</span>
            </span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { listPost } from "@/api/blog";
import usePostStore from '@/store/modules/post';

export default {
  name: "BlogView",
  data(){
    return {
      articleList:[]
    }
  },
  created(){
    listPost().then(response =>{
      this.articleList = response.data.rows;
    });
  },
  methods:{
    jumpToArticle:function (article){
      const post = usePostStore();
      post.url = article.path;
      this.$router.push({
        path:'/article'
      })

    }
  }
}
</script>

<style scoped>
.container{
  max-width: 780px;
  width: 100%;
  min-height: 700px;

  padding: 30px 0;
  margin: 10px auto;

  flex-grow: 1;
}

.blog-list{
  background: #fff;
  border-radius: 5px;
  padding: 20px 0;

  list-style: none;
}

.blog-list li{
  border-bottom: 1px solid #efefef;
  padding: 20px 30px;
}

.title{
  color: #333;
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  margin-bottom: 5px;
  text-decoration: none;
}

.abstract{
  color: #999;
  font-size: 13px;
  line-height: 22px;
  margin-bottom: 5px;
}

.meta{
  color: #aaa;
  font-size: 12px;
  line-height: 18px;
}


</style>
